<template>
	<div class="wrapper" id="wrapper">
		<div class="left-menu">
			<div class="logo-box">
				<!--<img src="./logo_white.png" >-->
				蓝竹云
			</div>
			<div class="white-space" style="height: 30px;width: 100%"></div>
			<div class="menu-out " v-for="item in menu_list" :v-bind="item.id">
				<div class="menu-out-box ">
					<div class="menu-name">{{item.menuName}}</div>
				</div>
				<div class="menu-index-box" v-for="infor in item.senMenu">
					<div class="second-menu" @click="to_page(infor);btn_classCh($event)" style="font-size: 16px;">
						<div :class="{'second-menu-div': !isMenu(infor.name),'second-menu-div2': isMenu(infor.name)}">
							<i :class="infor.icon" style="font-size: 23px;"></i>
							<div class="second-menu-router">{{infor.name}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right-box">
			<div class="right-top-menu">
				<i class="el-icon-s-fold"
					style="font-size: 25px;margin-left: 20px;cursor: pointer; position: fixed;z-index: 99;color: white;"
					@click="closeLeftMenu();closeMenu=true" v-if="!closeMenu"></i>
				<!--                <span style="margin-left: 10px;cursor: pointer" @click="closeLeftMenu();closeMenu=true" v-if="!closeMenu">隐藏菜单</span>-->
				<i class="el-icon-s-unfold" style="font-size: 25px;margin-left: 20px;cursor: pointer;color: white;"
					@click="openLeftMenu();closeMenu=false" v-if="closeMenu"></i>
				<!--                <span style="margin-left: 10px;cursor: pointer" @click="openLeftMenu();closeMenu=false" v-if="closeMenu">展开菜单</span>-->
				<div class="user-infor">
					<i class="el-icon-bell" style="font-size: 25px;margin-right: 20px;color: white;cursor: pointer;"
						@click="showNotice()"></i>
					<div v-if="shownotice" style="color: #fff;">
						<div class="element"
							style="position: fixed;right: 315px;top: 64px; border: 10px solid; border-color: transparent transparent #9d9d9d transparent;">
						</div>
						<div class="element"
							style="border: 1px solid #9d9d9d; position: fixed;right: 10%;top: 83px; height: 300px;width: 400px;overflow-y: auto;border-radius: 3px;background-color: #1e1e1e;">
							<div v-for="(item,index) in noticeList" v-bind:key="index"
								style="background-color: #1e1e1e;">
								<div style="border-bottom: 1px solid #9d9d9d; text-indent: 2em;padding: 10px 25px;cursor: pointer;"
									@click="isRead(item.id,index)">
									<div style="position: absolute; left: 95%; height:8px;width: 8px; border-radius: 100%; background-color: red;"
										v-if="!item.noticeState">
									</div>
									<div style="font-weight: 700; font-size: 17px;text-indent: 0;padding-bottom: 2px;">
										{{item.title}}
									</div>
									<div>{{item.content}}</div>
									<span style="padding-left:40% ;padding-top: 10px;">{{item.createTime}}</span>
								</div>
							</div>
						</div>
					</div>
					<img src="../../views/page_c/image/head_img.jpg">

					<el-menu class="el-menu-demo" mode="horizontal">
						<el-submenu index="2">
							<template slot="title">{{username}}</template>
							<el-menu-item index="2-1" @click="quitLogin" v-if="sureLogin">退出登录</el-menu-item>
							<el-menu-item index="2-1" @click="quitLogin" v-else>请登录</el-menu-item>
						</el-submenu>
					</el-menu>

				</div>
			</div>
			<div style="height: 70px;"> </div>
			<div class="right-page">
				<router-view style="overflow: hidden"></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		getNotice,
		updNotice,
		getUserInfo
	} from '../../api/work.js'
	export default {
		name: "Home",
		data() {
			return {
				sureLogin: false,
				userid: '',
				username: '未登录',
				closeMenu: false,
				menuToName: "",
				secMenuclass: false,
				routeWidth: "",
				routeHeight: "",
				screenWidth: "",
				shownotice: false,
				noticeList: [],
				menu_list: [{
						id: 125,
						menuName: "首页",
						icon: "el-icon-s-data",
						yesShow: false,
						class: "menu-index-box-close",
						senMenu: [{
							name: "首页",
							icon: "el-icon-house",
							menuUrl: '/demo/index'
						}]
					},


					{
						id: 3,
						menuName: "产品",
						icon: "el-icon-user-solid",
						yesShow: false,
						class: "menu-index-box-close",
						senMenu: [{
								name: "购买产品",
								icon: "el-icon-shopping-cart-full",
								menuUrl: '/demo/goods'
							},
							{
								name: "我的产品",
								icon: "el-icon-cpu",
								menuUrl: '/demo/mygoods'
							},
							{
								name: "帮助文档",
								icon: "el-icon-notebook-2",
								menuUrl: '/demo/help_document'
							},
						]
					},
					{
						id: 4,
						menuName: "用户",
						icon: "el-icon-user-solid",
						yesShow: false,
						class: "menu-index-box-close",
						senMenu: [{
								name: "个人信息",
								icon: "el-icon-user",
								menuUrl: '/my'
							},
							{
								name: "我的工单",
								icon: "el-icon-message",
								menuUrl: '/work'
							},
						]
					},
					{
						id: 4,
						menuName: "财务",
						icon: "el-icon-user-solid",
						yesShow: false,
						class: "menu-index-box-close",
						senMenu: [{
							name: "我的订单",
							icon: "el-icon-notebook-2",
							menuUrl: '/demo/myorder'
						}, ]
					},
				]
			}
		},
		methods: {
			quitLogin() {
				this.$store.state.userid = '';
				this.$store.state.password = '';
				this.$store.state.isLogin = '';
				this.$store.state.token = '';
				sessionStorage.setItem("isLogin", false)
				sessionStorage.setItem("UserId", '')
				sessionStorage.setItem("isLogin", '')
				sessionStorage.setItem("token", '')
				localStorage.removeItem("LZY-TOKEN");
				localStorage.removeItem("USER-ID")
				// window.location.reload
				this.$router.push("/login")
			},
			closeLeftMenu() {
				let m = document.getElementsByClassName("left-menu")
				console.log(m)
				m[0].className = "left-menu left-menu-close"
				setTimeout(m[0].className = "left-menu left-menu-close left-menu-close-2", 600);
			},
			openLeftMenu() {
				let m = document.getElementsByClassName("left-menu")
				console.log(m)
				m[0].className = "left-menu"
			},
			getNotice() {
				let data = {
					userId: localStorage.getItem('userid')
				}
				// 获取通知
				getNotice(data).then(res => {
					// 请求成功，处理返回的数据
					for (var i = 0; i < res.length; i++) {
						if (res[i].noticeState == "0") {
							res[i].noticeState = false
						} else {
							res[i].noticeState = true
						}
					}
					this.noticeList = res
				}).catch(error => {
					// 请求失败，处理错误信息
					this.error = error;
					// this.$message.warning("出现未知错误, 请联系管理员")
				});
			},
			isRead(id, i) {
				let data = {
					"id": id,
					"noticeState": 1
				}
				// 修改通知
				updNotice(data).then(res => {
					this.noticeList[i].noticeState = true
				})
				this.noticeList[i].isread = true
			},
			btn_classCh(e) {
				console.log(e)
				let total = 0;
				for (let i = 0; i < this.menu_list.length; i++) {
					// if(this.menu_list[i].yesShow){
					total += this.menu_list[i].senMenu.length
					// }
				}
				// console.log(document.getElementsByClassName("seconed-menu-icon"))

				for (var i = 0; i < total; i++) {
					if (document.getElementsByClassName("second-menu-router")[i].className === "second-menu-router active")
						document.getElementsByClassName("second-menu-router")[i].className = "second-menu-router"
					document.getElementsByClassName("seconed-menu-icon")[i].className = "seconed-menu-icon"
					// if(document.getElementsByClassName("seconed-menu-icon")[i].className==="seconed-menu-icon icon-active")
				}

				if (e.srcElement.className === "second-menu-router") {
					e.srcElement.className = "second-menu-router active"
				}


				for (var i = 0; i < total; i++) {
					if (document.getElementsByClassName("second-menu-router")[i].className ===
						"second-menu-router active") {
						document.getElementsByClassName("seconed-menu-icon")[i].className = "seconed-menu-icon icon-active"
					}
				}
			},
			getWidth() {
				console.log(document.body)
				let i = document.getElementById("wrapper")
				let width = document.body.clientWidth
				let widths = width - 200
				// i.style.width = widths+"px"
				console.log(i.style.width)
				console.log(i.style.height)
				this.routeWidth = document.body.clientWidth - 255 + "px"
				console.log()
			},
			openOrClose(e) {
				console.log(e)
				if (e.yesShow) {
					e.yesShow = false
					e.class = "menu-index-box-close"
				} else {
					e.yesShow = true
					e.class = "menu-index-box"
				}
			},
			to_page(e) {
				this.menuToName = e.name
				this.$router.push(e.menuUrl).catch(res => {})
			},
			openOrCloseSec(e) {

			},
			isMenu(i) {
				if (i == this.menuToName) {
					return true
				} else {
					return false
				}
			},
			getUsername() {
				let data = {
					user_id: this.userid
				}
				// 获取用户name
				getUserInfo(data).then(res => {
					this.username = res.userName
				})
			},
			showNotice() {
				this.shownotice = !this.shownotice
				return this.shownotice
			},
			ifLogin() {
				console.log("LZY-TOKEN")
				console.log(localStorage.getItem("LZY-TOKEN"))
				if (localStorage.getItem("LZY-TOKEN") != null) {
					// 未登录
					this.sureLogin = true
				} else {
					this.sureLogin = false
				}
			}

		},
		mounted() {
			this.ifLogin()
			this.userid = localStorage.getItem('userid');
			this.getUsername()
			this.getNotice()
			// setInterval(this.getNotice, 60000)
			// setInterval(this.getUsername, 60000)
			//获取屏幕尺寸
			this.screenWidth = document.body.clientWidth
			window.onresize = () => {
				console.log('高度');
				//屏幕尺寸变化
				return (() => {
					this.screenWidth = document.body.clientWidth
				})()
			}
			this.getWidth()
			this.$router.push("/demo/index")
			this.getUsername
		},
		watch: {},
	}
</script>

<style scoped>
	.wrapper {
		display: flex;
		height: 100%;
		width: 100%;
		position: absolute;
		/* background-color: rgba(245, 246, 250, 1); */
		background-color: #171717;
		/*background-color: rgba(212, 253, 255, 0.62);*/
	}

	.left-menu {
		left: 0;
		width: 20%;
		height: 100vh;
		/* background: rgba(255, 255, 255, 1); */
		background: #171717;
		box-shadow: 4px 0px 4px 0px rgba(43, 45, 55, 0.01);
		border-right: 1px solid #313131;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
		transition: all .6s;
		position: relative;
		max-width: 250px;
	}

	.left-menu-close {
		position: relative;
		left: -280px;
		/*transition: all .6s;*/
	}

	.left-menu-close-2 {
		width: 0px;
		/*transition: all .6s;*/
	}

	.logo-box {
		width: 255px;
		height: 70px;
		opacity: 1;
		background: #171717;
		box-shadow: 0px 1px 0px 0px rgba(107, 112, 126, 0.05);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		font-family: 仿宋;
		font-weight: bold;
		color: white;
	}

	.logo-box img {
		border: 1px;
		border-radius: 20px;
		width: 200px;
		height: 70px;
		filter: brightness(0);
		position: relative;
		top: 10px;
		right: 5px;
	}

	.menu-out {
		overflow: hidden;
		transition: all .5s;
		/*height: 50px;*/
		cursor: pointer;
		transition: all .5s;
		width: 195px;
		opacity: 1;
		border-radius: 8px;
		/*background: rgb(233, 234, 238);*/
		/* color: black; */
		display: flex;
		/*align-items: center;*/
		flex-wrap: wrap;
		/* margin-bottom: 20px; */
		flex-direction: row;
		justify-content: center;

	}

	.menu-out-box {
		cursor: default;
		width: 195px;
		height: 50px;
		opacity: 1;
		border-radius: 8px;
		/*background: rgb(243, 243, 243);*/
		color: rgb(91, 96, 114);
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.menu-out i {

		position: relative;
		left: 10px;
	}

	.menu-name {
		position: relative;
		left: 20px;
		color: #fff;
		font-size: 20px;
		font-weight: 600 !important;
	}

	.icon-down {
		position: absolute;
		left: 180px;
	}

	.menu-index-box {
		width: 155px;
		display: flex;
		transition: all .5s;
		flex-wrap: wrap;
		flex-direction: row;

	}

	.second-menu {
		cursor: pointer;
		width: 155px;
		height: 40px;
		display: flex;
		margin-top: 5px;
		transition: all .5s;
	}

	.second-menu:hover {
		cursor: pointer;
		width: 155px;
		height: 40px;
		display: flex;
		margin-top: 5px;
		transition: all .5s;
		color: #fff;
	}

	.second-menu2 {
		cursor: pointer;
		width: 155px;
		height: 40px;
		display: flex;
		margin-top: 5px;
		transition: all .5s;
		color: #fff;
	}

	.active {

		color: rgba(0, 84, 254, 1);
	}

	.active-menu {
		color: white;
		background: rgba(0, 84, 254, 1);
	}

	.menu-index-box-close {
		width: 155px;
		height: 0;
		display: flex;
		margin-top: 10px;
		transition: all .5s;
	}

	.icon-turn90 {
		transition: all .43s;
		transform: rotate(90deg);
	}

	.icon-turn-back {
		transition: all .43s;
	}

	.seconed-menu-icon {
		position: relative;
		background: url("./tip.png") no-repeat;
		width: 21px;
		height: 21px;
		background-position: 5px 9px;
	}

	.icon-active {
		position: relative;
		background: url("./tipin.png") no-repeat;
		width: 21px;
		height: 21px;
		background-position: 5px 9px;
	}

	.second-menu-div {
		display: flex;
		color: #fff;
		/* background-color: #212121; */
		width: 100%;
		align-items: center;
		border-radius: 5px;
	}

	.second-menu-div:hover {
		display: flex;
		color: #fff;
		background-color: #212121;
		width: 100%;
		align-items: center;
		border-radius: 5px;
	}

	.second-menu-div2 {
		display: flex;
		color: #fff;
		background-color: #212121;
		width: 100%;
		align-items: center;
		border-radius: 5px;
	}

	.second-menu-router {
		position: relative;
		left: 10px;
		margin-left: 10px;
		/* 		color: #A5AFCE; */
	}

	.right-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		/*overflow-y: scroll;*/
		/* background-color: rgba(255, 255, 255, 0.8);*/
		/* backdrop-filter: blur(10px); */
	}

	.right-top-menu {
		position: fixed;
		width: 100%;
		height: 40px;
		background: #171717;
		box-shadow: 0px 4px 4px 0px rgba(43, 45, 55, 0.01);
		display: flex;
		z-index: 99;
		align-items: center;
	}

	.user-infor {
		right: 35px;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user-infor img {
		width: 37px;
		height: 37px;
		border-radius: 100%;
	}

	.user-infor span {
		display: block;
		margin-left: 20px;
	}

	.right-page {
		width: 100%;
		/*overflow: hidden;*/
		overflow-y: auto;
		height: 100%;
	}

	.page-name {
		margin-left: 35px;
		margin-top: 10px;
		font-size: 18px;
	}

	.el-menu-demo {
		margin-left: 20px;
		background-color: #171717;
	}

	/* CSS样式 */
	.element {
		animation-name: slideDown;
		/* 指定动画序列名称 */
		animation-duration: 1s;
		/* 动画持续时间 */

	}

	/* @keyframes 定义动画序列 */
	@keyframes slideDown {
		0% {
			opacity: 0;
			/* 初始状态不可见 */
			transform: translateY(-30px);
			/* 在y轴上移动 -50px */
		}

		100% {
			opacity: 1;
			/* 最终状态完全可见 */
			transform: translateY(0);
			/* y轴位置重置为原点 */
		}
	}
</style>
